<!--
系统导航菜单
@author pan
@createDate 2022/02 2022/2/27 11:44
-->
<script setup lang="ts" name="SystemNavMenu">
import { computed, toRefs } from 'vue'
import { Expand } from '@element-plus/icons-vue'
import { SystemMenuType } from '@/system'
import { SvgIcon } from 'components/index'
import { useRouter } from 'vue-router'

const props = withDefaults(
  defineProps<{
    /**
     * 是否启用侧边栏风格模式. 默认:true. 表示垂直菜单，否则表示水平菜单
     */
    enableSideModel?: boolean
    /**
     * 菜单是否收缩(只有enableSideModel为true时有效). 默认: false
     */
    menuCollapse?: boolean
    /**
     * 菜单数据. 默认:空数组
     */
    menuArr?: SystemMenuType[]
  }>(),
  { enableSideModel: true, menuCollapse: false, menuArr: () => [] }
)
const $emits = defineEmits({
  /**
   * 菜单展开/收缩事件
   * @param collapse
   */
  menuCollapse: (collapse: boolean) => true,
})
const { enableSideModel, menuCollapse } = toRefs(props)
const enableJsMenuModelClass = computed(() =>
  enableSideModel.value ? 'jsSideMenuModel' : 'jsTopMenuModel'
)
const elMenuMode = computed(() =>
  enableSideModel.value ? 'vertical' : 'horizontal'
)

/**
 * 判断是否有子菜单
 * @param menuItem
 */
function hasChildrenMenu(menuItem: SystemMenuType) {
  return menuItem.children && menuItem.children.length > 0
}
function buildIndex(menuItem: SystemMenuType, idx?: number) {
  if (idx) {
    return `${menuItem.code}-${idx}`
  } else {
    return menuItem.code
  }
}
function buildMenuName(menuItem: SystemMenuType) {
  return menuItem.name
}
function onElMenuCollapse() {
  $emits('menuCollapse', !menuCollapse.value)
}
const $router = useRouter()
function onMenuItemClick(menuItem: SystemMenuType) {
  if (menuItem.url) {
    if (
      menuItem.url.startsWith('http://') ||
      menuItem.url.startsWith('https://')
    ) {
      window.open(menuItem.url)
    } else {
      $router.push({ path: menuItem.url })
    }
  }
}
</script>

<template>
  <div class="cSystemMenu" :class="enableJsMenuModelClass">
    <div class="cSystemMenuMain">
      <el-menu class="systemElMenu" :mode="elMenuMode" :collapse="menuCollapse">
        <template v-for="(menuItem, idx) in menuArr">
          <el-sub-menu
            v-if="hasChildrenMenu(menuItem)"
            :key="buildIndex(menuItem, idx)"
            :index="buildIndex(menuItem)"
          >
            <template #title>
              <el-icon>
                <SvgIcon :name="menuItem.icon" class="systemMenuIcon"></SvgIcon>
              </el-icon>
              <span :title="buildMenuName(menuItem)" class="menuName">
                {{ buildMenuName(menuItem) }}
              </span>
            </template>
            <template v-for="(childItem, pos) in menuItem.children">
              <el-sub-menu
                v-if="hasChildrenMenu(childItem)"
                :key="buildIndex(childItem, pos)"
                :index="buildIndex(childItem)"
              >
                <template #title>
                  <span :title="buildMenuName(childItem)" class="menuName">
                    {{ buildMenuName(childItem) }}
                  </span>
                </template>
                <el-menu-item
                  v-for="(lastItem, kkk) in childItem.children"
                  :key="buildIndex(lastItem, kkk)"
                  :index="buildIndex(lastItem)"
                  @click="onMenuItemClick(lastItem)"
                >
                  <span :title="buildMenuName(lastItem)" class="menuName">
                    {{ buildMenuName(lastItem) }}
                  </span>
                </el-menu-item>
              </el-sub-menu>
              <el-menu-item-group v-else :key="buildIndex(childItem, 9999)">
                <el-menu-item
                  :key="buildIndex(childItem, pos)"
                  :index="buildIndex(childItem)"
                  @click="onMenuItemClick(childItem)"
                >
                  <span :title="buildMenuName(childItem)" class="menuName">
                    {{ buildMenuName(childItem) }}
                  </span>
                </el-menu-item>
              </el-menu-item-group>
            </template>
          </el-sub-menu>
          <el-menu-item
            v-else
            :key="buildIndex(menuItem, idx)"
            :index="buildIndex(menuItem)"
            @click="onMenuItemClick(menuItem)"
          >
            <el-icon>
              <SvgIcon :name="menuItem.icon" class="systemMenuIcon"></SvgIcon>
            </el-icon>
            <span :title="buildMenuName(menuItem)" class="menuName">
              {{ buildMenuName(menuItem) }}
            </span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <div
      v-if="enableSideModel"
      class="cSystemMenuOther"
      @click="onElMenuCollapse"
    >
      <el-icon :size="28">
        <expand />
      </el-icon>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.jsTopMenuModel {
  width: 900px;
  height: $topNavHeight;
  .systemElMenu {
    height: $topNavHeight;
  }
}
.cSystemMenu {
  display: flex;

  .cSystemMenuMain {
    flex: 1;
  }

  .menuName {
    @include textOverflow(120px, inline-block);
  }

  .cSystemMenuOther {
    height: 48px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    cursor: pointer;
    border-top: 1px solid rgba(51, 51, 51, 0.1);
  }
  .systemMenuIcon {
    position: relative;
    top: 1px;
  }
}

.jsSideMenuModel {
  flex-direction: column;
  height: 100%;

  .cSystemMenuMain {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
